<template>
  <div class="center-style">
    <div>
      <MapChart :loading="true" :info="[{ name: '重庆', value: 100 }]" />
    </div>
    <div class="side-item">
      <div class="side-title">
        <img src="../../../assets/images/screen/center-2.png" alt="" />
      </div>
      <div class="side-content" style="position: relative">
        <StackedAreaChart
          :loading="true"
          with="100%"
          :legendData="['上月', '本月']"
          :xAxisData="['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月']"
          :total="100000"
          :chartData="[
            [657, 607, 2217, 1689, 1867, 2133, 2169, 2093, 2051, 2641],
            [373, 306, 1924, 1468, 1902, 2312, 2421, 2403, 1944, 2472],
          ]"
        />
        <div class="content-right">
          <span class="item-span item-span-one" @click="handleCount('day')">按日统计</span>
          <span class="item-span item-span-tow" @click="handleCount('mounth')">按月统计</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" name="Left" setup>
  import { ref, computed } from 'vue';
  import StackedAreaChart from './StackedAreaChart.vue';
  import MapChart from './MapChart.vue';
  // import { useSrceenStore } from '/@/store/modules/srceen';
  //    @region-click="handleRegionClick"
  //const srceenStore = useSrceenStore();
  const props = defineProps({
    loading: {
      type: Boolean as PropType<Boolean>,
      default: false,
    },
  });
  const handleCount = (type: string) => {
    console.log(type);
  };
  // const mapGeoJson = computed(() => {
  //   return srceenStore.getGeoJsonCode;
  // });
  // srceenStore.actionGeoJsonCode();
</script>
<style scoped lang="less">
  .center-style {
    line-height: 1;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2.5fr 1fr;
    height: 100%;
    color: #fff;
    font-size: 16px;
  }
  .content-right {
    position: absolute;
    right: 12px;
    z-index: 2;
    top: 8px;
    .item-span {
      display: inline-block;
      width: 92px;
      height: 24px;
      font-size: 12px;
      text-align: center;
      line-height: 24px;
      color: #ffffff;
      cursor: pointer;
    }
    .item-span-one {
      background: url('../../../assets/images/screen/item-1.png') no-repeat center center;
      background-size: 100% auto;
    }
    .item-span-tow {
      background: url('../../../assets/images/screen/item-2.png') no-repeat center center;
      background-size: 100% auto;
    }
  }
</style>
